<template>
  <section class="container" :style="{ backgroundImage: `url(${bgi})` }">
    <header>
      <div class="logo">
        <span
          class="circle"
          :style="{
            backgroundImage: `url(${
              data.headPortrait ? data.headPortrait : sellwellside
            })`,
          }"
        ></span>
      </div>
      <ul class="auth">
        <li>
          <span class="auth-name">{{ data.name }}</span>
        </li>
        <li>
          <!-- <span class="auth-info" v-if="data.state">
            <span
              class="icon"
              :style="{ backgroundImage: `url(${icon_v})` }"
            ></span>
            <span class="context">已实名</span>
          </span> -->
        </li>
      </ul>
    </header>
    <main>
      <ul>
        <li>
          <div class="left">工种类型:</div>
          <div class="right">
            <nav>
              <!-- <span class="is-active" v-for="(ite, i) in data.taskDivideList" :key="i">{{ite}}</span> -->
              <van-tag
                style="font-weight: 500"
                size="large"
                class="tag-blue"
                v-for="(ite, i) in data.taskDivideList"
                :key="i"
                >{{ ite }}</van-tag
              >
            </nav>
          </div>
        </li>
        <!-- <li>
          <div class="left">施工类型:</div>
          <div class="right">
            <nav>机器施工</nav>
          </div>
        </li> -->
        <li>
          <div class="left">人员构成:</div>
          <div class="right">
            <span>{{
              !!data.personnelStateName ? data.personnelStateName : ''
            }}</span>
          </div>
        </li>
        <li>
          <div class="left">施工方式:</div>
          <div class="right">
            <span>{{ wrpattern(data.workMode) }}</span>
          </div>
        </li>
        <li>
          <div class="left">施工人数:</div>
          <div class="right">
            <span>{{
              !!data.personnelNum ? data.personnelNum + '人' : ''
            }}</span>
          </div>
        </li>
        <li>
          <div class="left">施工地区:</div>
          <div class="right">
            <span>{{ data.cityName }}</span>
          </div>
        </li>
        <li>
          <div class="left">
            性<span style="visibility: hidden">占坑</span>别:
          </div>
          <div class="right">
            <span>{{ data.sex && data.sex == 1 ? '男' : '女' }}</span>
          </div>
        </li>
        <li>
          <div class="left">
            年<span style="visibility: hidden">占坑</span>龄:
          </div>
          <div class="right">
            <span>{{ !!data.age ? data.age + '岁' : '' }}</span>
          </div>
        </li>
        <li>
          <div class="left">
            工<span style="visibility: hidden">占坑</span>龄:
          </div>
          <div class="right">
            <span>{{ data.workAge }}</span>
          </div>
        </li>
        <!--<li>
          <div class="left">参与项目:</div>
          <div class="right" style="white-space: normal">
            <span>{{
              !!data.projectParticipate ? data.projectParticipate : '无'
            }}</span>
          </div>
        </li>-->
      </ul>
      <article></article>
    </main>
    <!--<article>
      <div class="top">
        <span style="font-size: 14px"
          >技能证书或作品展示图:{{
            !photos || photos.length == 0 ? ' 无' : ''
          }}</span
        >
      </div>
      <div class="bottom" v-if="photos.length > 0">
        <div class="pictures">
          <van-image
            v-for="(item, index) in photos"
            class="item"
            height="100%"
            fit="cover"
            radius="5px"
            :src="item"
            @click="showImage(index)"
            :key="index"
          >
          </van-image>
        </div>
      </div>
    </article>-->
    <footer>
      <div class="bottom">
        <span>联系我时说明是在"<cite>喷喷涂涂</cite>"上看到的</span>
      </div>
      <div class="bottom" style="margin-top: 4px">
        <span>喷喷涂涂提示:联系时，请再次核实真实性!</span>
      </div>
      <div class="top" @click="call">
        <span>电话联系</span>
      </div>
    </footer>
  </section>
</template>
<script>
import { Row, Col, Icon, Image, ImagePreview, Tag, Toast, Dialog } from 'vant';
import sellwellsidePng from '@/assets/images/merchant/merchant_head.jpg';
import { getLocalStorage, setLocalStorage } from '@/utils/local-storage';
import bgi from '@/assets/images/contract/bgi.png';
import icon_v from '@/assets/images/contract/icon_v.png';
import areaList from '@/views/user/module-address-edit/area_all.json';
import {
  getContractDetail,
  getContractDicItem,
  getContractDetail_tel,
  authInfo,
  getOrderSign,
  isAllowedShowTel,
} from '@/api/api';
export default {
  name: '',
  props: {},
  data() {
    return {
      sellwellside: sellwellsidePng,
      bgi: bgi,
      icon_v: icon_v,
      photos: [],
      query: {
        id: undefined,
      },
      //工种
      taskDivideId: 0,
      taskDivideOption: [
        {
          text: '工种选择',
          value: 0,
        },
      ],
      //人员构成
      personMusterId: 0,
      personMusterOption: [
        {
          text: '人员构成',
          value: 0,
        },
      ],
      taskDivideMap: new Map(),
      personMusterMap: new Map(),
      ageMap: new Map(),
      data: {},
      areaList: areaList,
    };
  },
  created() {
    //从路由取得参数
    this.query.id = this.$route.params.id + '' || '0';
    this.init();
  },
  computed: {},
  methods: {
    wrpattern(tp) {
      if (tp != undefined) {
        if (tp.length == 1) {
          if (tp[0] == '0') {
            return '机器';
          } else {
            return '人工施工';
          }
        } else if (tp.length == 2) {
          return '人工施工+机器施工';
        }
      }
    },
    showImage(index) {
      ImagePreview({
        images: this.photos,
        startPosition: index,
        closeable: true,
        swipeDuration: 10,
      });
    },
    async init() {
      await getContractDicItem()
        .then((res) => {
          const taskDivideList = res.data.data.gozong;
          const personMusterList = res.data.data.gouchenglist;
          const ageList = res.data.data.ageList;
          let obj;
          taskDivideList.forEach((item) => {
            obj = {};
            obj['text'] = item.itemName;
            obj['value'] = item.itemValue;
            this.taskDivideMap.set(item.itemValue, item.itemName);
            this.taskDivideOption.push(obj);
          });
          personMusterList.forEach((item) => {
            obj = {};
            obj['text'] = item.itemName;
            obj['value'] = item.itemValue;
            this.personMusterMap.set(item.itemValue, item.itemName);
            this.personMusterOption.push(obj);
          });
          ageList.forEach((item) => {
            this.ageMap.set(item.itemValue, item.itemName);
          });
        })
        .then(() => {
          this.getDetail();
        });
    },
    async getDetail() {
      if (!!this.query.id) {
        await getContractDetail(this.query)
          .then((res) => {
            this.data = res.data.data;
            this.photos = this.data.remark || [];
            if (this.data.workType) {
              let taskDivideList = [];
              this.data.workType.forEach((ite) => {
                if (this.taskDivideMap.get(ite)) {
                  taskDivideList.push(this.taskDivideMap.get(ite));
                }
              });
              this.data['taskDivideList'] = taskDivideList;
            }
            if (this.ageMap.get(this.data.workHour + '')) {
              this.data['workAge'] =
                this.ageMap.get(this.data.workHour + '') + '工龄';
            }
            if (this.personMusterMap.get(this.data.personnelState + '')) {
              this.data['personnelStateName'] = this.personMusterMap.get(
                this.data.personnelState + ''
              );
            }
            //地区判定
            let cityId = this.data.regionId || '';
            let regexp = /^[1-9]\d{5}$/;
            if (!regexp.test(cityId)) {
              this.data['cityName'] = '';
            } else {
              this.data['cityName'] =
                this.areaList['city_list'][parseInt(cityId)] || '';
            }
          })
          .then(() => {
            getContractDetail_tel(this.query).then((res) => {
              this.data['tel'] = res.data.data;
            });
          });
      }
    },
    call() {
      authInfo().then((res) => {
        this.userId = res.data.data.userId;
        this.mobile = res.data.data.mobile;
        this.statu = res.data.data.status;
        let status = res.data.data.status;
        this.userLevel = res.data.data.userLevel;
        if (status == 0) {
          //未认证
          Toast('请先验证手机号!');
          this.$router.push(`/check`);
          return;
        } else {
          //已认证
          setLocalStorage({
            userId: this.userId,
            mobile: this.mobile,
          });
          let isAllowed = false;
          isAllowedShowTel({ projectId: this.usedId })
            .then((res) => {
              isAllowed = res.data.data || false;
            })
            .then(() => {
              if (isAllowed) {
                window.location.href = 'tel:' + this.data.tel;
              } else {
                Dialog.confirm({
                  title: '系统提示',
                  message:
                    '每天一次免费查看信息动态 \n是否购买"涂装行业信息动态"月卡会员',
                  confirmButtonText: '是',
                  cancelButtonText: '否',
                })
                  .then(() => {
                    this.pay(2);
                  })
                  .catch(() => {
                    // on cancel
                  });
              }
            });
        }
      });
    },
    pay(type) {
      if (typeof WeixinJSBridge == 'undefined') {
        if (document.addEventListener) {
          document.addEventListener(
            'WeixinJSBridgeReady',
            onBridgeReady1,
            false
          );
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', onBridgeReady1);
          document.attachEvent('onWeixinJSBridgeReady', onBridgeReady1);
        }
      } else {
        this.onBridgeReady1();
      }
    },
    onBridgeReady1() {
      getOrderSign({
        orderId: 1181174,
      }).then((res) => {
        let that = this;

        that.orderSn = res.data.data.orderSn;

        const Mfbank = JSON.parse(res.data.data.info.wcPayData);

        WeixinJSBridge.invoke(
          'getBrandWCPayRequest',
          {
            appId: Mfbank.appId, //公众号名称，由商户传入
            timeStamp: Mfbank.timeStamp, //时间戳，自1970年以来的秒数
            nonceStr: Mfbank.nonceStr, //随机串
            package: Mfbank.package,
            signType: Mfbank.signType, //微信签名方式：
            paySign: Mfbank.paySign, //微信签名
          },
          function (res) {
            if (res.err_msg == 'get_brand_wcpay_request:ok') {
              //跳转到开通会员接口
              setTenCardOnline({
                orderSn: that.orderSn,
                goodId: 1181174,
              }).then((res) => {
                let status = 0;
                if (res.data.errmsg == '成功') {
                  status = 1;
                }
                that.$router.push({
                  name: 'paymentVipStatus',
                  query: {
                    status: status,
                  },
                });
              });
            }
          }
        );
      });
    },
  },
  components: {
    [Row.name]: Row,
    [Dialog.Component.name]: Dialog.Component,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Image.name]: Image,
    [ImagePreview.name]: ImagePreview,
    [Tag.name]: Tag,
    [Toast.name]: Toast,
  },
};
</script>
<style lang='scss' scoped>
.van-tag--large {
  font-size: 12px !important;
  padding: 2px 4px !important;
}
#app,
body {
  background-color: white;
}
.container {
  width: 100vw;
  height: 100vh;
  font-size: 16px;
  background-color: white;
  margin: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  background-repeat: no-repeat;
  background-size: 100% 100%;

  > header {
    .logo {
      display: flex;
      align-items: center;
      justify-content: center;

      .circle {
        background-size: 100% 100%;
        display: block;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-repeat: no-repeat;
      }
    }

    .auth {
      margin-top: 10px;

      > li {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;

        .auth-name {
          display: block;
          font-weight: bold;
          font-size: 18px;
        }

        .auth-info {
          //display: block;
          display: inline-flex;
          min-height: 30px;
          width: 100%;
          align-items: center;
          justify-content: center;

          .icon {
            width: 20px;
            display: block;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            height: 20px;
            transform: translateY(-3px);
          }

          .context {
            margin-left: 10px;
            font-size: 14px;
            line-height: 20px;
          }
        }
      }

      > li:nth-of-type(2) {
        margin-top: 5px;
      }
    }
  }

  > main {
    margin-top: 5px;
    font-size: 14px;

    > ul {
      > li {
        display: flex;
        margin-bottom: 15px;

        > div:nth-of-type(1) {
          flex: 1;
          // text-align: right;
        }

        > div:nth-of-type(2) {
          flex: 3;
        }

        .right {
          font-weight: bold;
          padding-left: 15px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          > nav {
            //transform: translateY(-50%);
            > span {
              margin: 0px 10px 5px 0;
              background-color: #eeeeee;
              float: left;
              padding: 2px 5px;
              // font-weight: bolder;
            }

            > span.is-active {
              background-color: #ed3f00;
              color: white;
              border-radius: 4px;
            }
          }
        }
      }
    }
  }

  > article {
    // margin-top: 20px;

    .bottom {
      margin-top: 9px;

      .pictures {
        white-space: nowrap;
        overflow-x: auto;
        height: 90px;
      }

      .pictures::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
      }

      .pictures .item {
        list-style: none;
        display: inline-block;
        //height: 100px;
        //width: 31%;
        margin-right: 10px;
        background: #ccc;
        text-align: center;
        height: 100%;
        width: 90px;
      }

      .pictures .item:last-child {
        margin: 0;
      }
    }
  }

  > footer {
    margin-top: 9px;

    > .top {
      margin-top: 13px;
      text-align: center;

      > span {
        letter-spacing: 5px;
        background-color: #ed3f00;
        padding: 8px 50px;
        border-radius: 30px;
        color: white;
        line-height: 30px;
      }
    }

    > .bottom {
      font-size: 12px;
      text-align: center;
      color: rgba(0, 0, 0, 0.451);
      margin-top: 10px;

      cite {
        color: #ed3f00;
        font-style: inherit;
      }
    }
  }
}
</style>
